<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
</head>
<body>
    <div id="app">
        <h1>当前时间{{date|formateTime}}</h1>
    </div>
</body>
<script>
    // 让个位前面添加0
    var parseDate = function(datetime){
        return datetime<10?'0'+datetime:datetime;
    }
    var app = new Vue({
        el:"#app",
        data:{
            date: new Date()
        },
        // 过滤器
        filters:{
            formateTime:function(val){
                var date = new Date(val)
                var year = date.getFullYear();
                var month = parseDate(date.getMonth()+1);
                var day = parseDate(date.getDate());
                var hours = parseDate(date.getHours());
                var min = parseDate(date.getMinutes());
                var sec = parseDate(date.getSeconds());
                return year+'-'+month+'-'+day+' '+hours+':'+min+':'+sec
            }
        },
        // 创建一个计时器
        created:function(){
            var that = this;    //作用域一致
            this.timer = setInterval(function(){
                that.date = new Date();
            },1000);
        },
        // 销毁
        beforeDestroy:function(){
            if(this.timer){
                clearInterval(this.timer);
            }
        }
    })
</script>
</html>